<template>
  <view>
  <view class="to_my_share">
   <view class="choose-tab">
     <view class="choose-tab-item" :class="chooseTab == 0 ? 'activeOne' : ''" data-choose="0" @tap="clickTab">
       我收到的共享设备({{deviceCount}})
     </view>
     <view class="choose-tab-item" :class="chooseTab == 1 ? 'activeTwo' : ''" data-choose="1" @tap="clickTab">
       我收到的共享门店({{storeCount}})
     </view>
   </view>
   <view class="content">
   <scroll-view scroll-y="true" :style="'height:'+ clientHeight+'px;'">
     <view class="store_device_content" >
      <uni-list border-full v-for="(item,index) in myShareByList" :key="index">
        	<uni-list-item :title="item.shareType==1?item.mkStore.storeName:item.mkEquipment.equipmentName" :note="item.equipmentStoreNo" showArrow  @tap="gotodetaile(item.shareType,item.equipmentStoreNo)"/>
      </uni-list>
     </view>
     <view class="no-devicelist" v-if="myShareByList.length <= 0">
       <image src="https://mkservice.mk-iot.com/subFile/mk2240/no-device.png" alt="" />
       <text>{{chooseTab == 1?'暂无收到分享门店':'暂无收到分享设备'}}</text>
     </view>
     </scroll-view>
   </view>
  </view>
  </view>
</template>

<script>
import {myShareList,delShareRecord} from '@/api/system/store/shareRecord.js'
export default {
  data() {
    return {
    // 是否正在请求数据,节流阀
    isloading: false,
    deviceCount: 0,
    storeCount: 0,
    chooseTab: 0,
    queryParams: {
      pageNum: 1,
      pageSize:8,
      recipientId:uni.getStorageSync("userId"),
      shareType: 0
      },
      myShareByList:[],
      clientHeight: 0,
    }
  },
  //刚加载数据时
  onShow() {
    var that = this;
    uni.getSystemInfo({
      success: function(res) {
        let screenHeight = uni.getSystemInfoSync().windowHeight //获取屏幕高度
        // 通过query 获取其余盒子的高度
        let query = uni.createSelectorQuery().in(that)
        query.select(".choose-tab").boundingClientRect()
        //通过query.exec返回的数组 进行减法 同时 去除margin 和border的
        query.exec(res => {
          let h1 = res[0].height
          let scrollHeight = screenHeight - h1
          that.clientHeight = scrollHeight
        })
      }
    })
    //重置关键数据
    this.empty()
    this.queryMyshareList()
  },
  methods: {
    //查询我的分享列表
    queryMyshareList(cb){
      // 打开遮罩层
      this.$modal.loading("数据加载中...");
      // ** 打开节流阀
      this.isloading = true
      myShareList(this.queryParams).then(response => {
        if (response.code === 200) {
          // 关闭遮罩层
          this.$modal.closeLoading();
          uni.stopPullDownRefresh()
          // 关闭节流阀
          this.isloading = false
          // 只要数据请求完毕，就立即按需调用 cb 回调函数
          cb && cb()
          if(this.chooseTab==0){
            this.deviceCount=response.total
          }else{
            this.storeCount=response.total
          }
          this.myShareByList = [...this.myShareByList, ...response.rows]
        }
      })
    },
   clickTab: function(e) { //点击切换
        if (!this.show) {
          //重置关键数据
            this.empty()
            this.chooseTab = e.target.dataset.choose;
          if (this.chooseTab == 0) {
            this.queryParams.shareType = 0
          } else if (this.chooseTab == 1) {
            this.queryParams.shareType = 1
          }
        }
        this.queryMyshareList()
      },
      //跳转设备或门店详细界面
      gotodetaile(shareType,equipmentStoreNo){ 
        if(shareType==1){
         this.$tab.navigateTo('/devicelistpkg/sharePage/share_store_detailed?storeId='+equipmentStoreNo+"&isSharer=0&type=2")
        }else{
          this.$tab.navigateTo('/devicelistpkg/sharePage/share_deivce_detailed?equipmentNo='+equipmentStoreNo+"&isSharer=0&type=2")
        }
      },
      //重置关键数据
      empty() {
        this.isloading = false
        this.myShareByList = []
        this.deviceCount=0
        this.storeCount=0
        this.queryParams.pageNum = 1
      },
    },
    // 触底的事件
    onReachBottom() {
      if (this.chooseTab == 0) {
        // 判断是否还有下一页数据
        this.queryParams.maintenanceStatus = 0
        if (this.queryParams.pageNum * this.queryParams.pageSize >= this.deviceCount) return uni.$showMsg('数据加载完毕')
      } else if (this.chooseTab == 1) {
        this.queryParams.maintenanceStatus = 1
        if (this.queryParams.pageNum * this.queryParams.pageSize >= this.storeCount) return uni.$showMsg('数据加载完毕')
      } 
      // 判断是否正在请求其它数据，如果是，则不发起额外的请求
      if (this.isloading) return
      //让页码值自增+1
      this.queryParams.pageNum += 1
      // 重新获取列表数据
      this.queryMyshareList()
    },
    //下拉事件
    onPullDownRefresh() {
      this.empty()
      //重新发起数据请求
      this.queryMyshareList()
    },
  }
</script>

<style>
  .choose-tab {
    background-color: #ffffff;
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    border-top: 1rpx solid #dfdfdf;
  }

  .choose-tab-item {
    font-weight: bold;
    width: 50%;
  }
  .activeOne {
    color: #ee0a24;
    border-bottom: 4rpx solid #ee0a24;
  }
  
  .activeTwo {
    color: rgb(255, 170, 0);
    border-bottom: 4rpx solid rgb(255, 170, 0);
  }
  .no-devicelist {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
  }
  
  .no-devicelist>image {
    margin-top: 200rpx;
    width: 200rpx;
    height: 200rpx;
  }
  
  .no-devicelist>text {
    margin-top: 20rpx;
  }
</style>